<template>
  <section class="bg-[#f2f2f2]">
    <div class="w-full container mx-auto p-4">
      <div class="grid lg:grid-cols-2 gap-6">
        <!-- 联系信息 -->
        <div>
          <h2 class="text-3xl font-bold text-gray-800 mb-8">
            {{ contactConfig?.info.title }}
          </h2>

          <div class="space-y-4">
            <!-- 电话 -->
            <div class="flex items-start space-x-4">
              <div
                class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"
              >
                <svg
                  class="w-6 h-6 text-blue-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                  {{ contactConfig?.info.phone.title }}
                </h3>
                <p
                  v-for="number in contactConfig?.info.phone.numbers"
                  :key="number"
                  class="text-gray-600"
                >
                  {{ number }}
                </p>
              </div>
            </div>
            <!-- 社交媒体 -->
            <div class="flex items-start space-x-4">
              <div
                class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"
              >
                <svg
                  class="w-6 h-6 text-orange-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m0 0V3a1 1 0 011 1v10a1 1 0 01-1 1H8a1 1 0 01-1-1V4m0 0H5a1 1 0 00-1 1v10a1 1 0 001 1h2"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                  {{ contactConfig?.info.app.title }}
                </h3>
                <p
                  v-for="email in contactConfig?.info.app.numbers"
                  :key="email"
                  class="text-gray-600"
                >
                  {{ email }}
                </p>
              </div>
            </div>
            <!-- 邮箱 -->
            <div class="flex items-start space-x-4">
              <div
                class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"
              >
                <svg
                  class="w-6 h-6 text-green-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                  {{ contactConfig?.info.email.title }}
                </h3>
                <p
                  v-for="email in contactConfig?.info.email.addresses"
                  :key="email"
                  class="text-gray-600"
                >
                  {{ email }}
                </p>
              </div>
            </div>

            <!-- 地址 -->
            <div class="flex items-start space-x-4">
              <div
                class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0"
              >
                <svg
                  class="w-6 h-6 text-purple-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">
                  {{ contactConfig?.info.address.title }}
                </h3>
                <p
                  v-for="line in contactConfig?.info.address.lines"
                  :key="line"
                  class="text-gray-600"
                >
                  {{ line }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="">
          <div class="text-[25px] font-bold">
            {{ homeConfig?.officeAddress }}
          </div>
          <div class="text-[15px] font-bold mt-2">
            {{ homeConfig?.officeAddressHeadquarters }}
          </div>
          <div class="text-[15px] text-gray-600">
            {{ homeConfig?.headquartersAddress }}
          </div>
          <div class="text-[15px] font-bold mt-2">
            {{ homeConfig?.officeAddressBranch }}
          </div>
          <div class="text-[15px] text-gray-600">
            {{ homeConfig?.branchAddress }}
          </div>
          <div class="text-[15px] font-bold mt-4">
            {{ homeConfig?.contactUsText }}
          </div>
          <div class="text-[15px] text-gray-600 mt-2">
            {{ homeConfig?.officePhone }}
          </div>
          <div class="text-[15px] text-gray-600 mt-2">
            {{ homeConfig?.officeEmail }}
          </div>
          <div class="text-[15px] text-gray-600 mt-2">
            {{ homeConfig?.photoText }}：{{ homeConfig?.photoNumber }}
          </div>
        </div> -->
        <div class="bg-gray-50 md:bg-[#f2f2f2] p-4 md:p-0 rounded-2xl">
          <div class="text-[32px] md:text-[32px]">
            {{ homeConfig?.actionText }}
          </div>
          <div class="text-[15px] md:text-[15px] text-gray-600 mt-2 md:mt-4">
            {{ homeConfig?.actionTextTwo }}
          </div>
          <el-form
            ref="ruleFormRef"
            :rules="rules"
            :model="fromData"
            class="mt-4"
            label-position="left"
            label-width="auto"
          >
            <el-row class="w-[100%]" :gutter="16">
              <el-col :xs="24" :md="12">
                <el-form-item prop="username">
                  <el-input
                    style="width: 100%"
                    v-model="fromData.username"
                    :placeholder="contactConfig?.form.fields.name.placeholder"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item prop="email">
                  <el-input
                    style="width: 100%"
                    v-model="fromData.email"
                    :placeholder="contactConfig?.form.fields.email.placeholder"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="w-[100%]" :gutter="16">
              <el-col :xs="24" :md="12">
                <el-form-item prop="companyname">
                  <el-input
                    style="width: 100%"
                    v-model="fromData.companyname"
                    :placeholder="
                      contactConfig?.form.fields.company.placeholder
                    "
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item prop="telephone">
                  <el-input
                    style="width: 100%"
                    v-model="fromData.telephone"
                    :placeholder="contactConfig?.form.fields.phone.placeholder"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item prop="content">
              <el-input
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                v-model="fromData.content"
                style="width: calc(100% - 16px)"
                :placeholder="contactConfig?.form.fields.message.placeholder"
              />
            </el-form-item>
            <el-button
              @click="submitForm"
              style="width: calc(100% - 16px)"
              type="primary"
              >{{ contactConfig?.form.submitButton }}</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from "vue";
import { useConfig } from "@/composables/useConfig";
import { postContactus } from "@/api/Join";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);
const { getHomeConfig, getContactConfig, getCommonConfig } = useConfig();
const homeConfig = computed(() => getHomeConfig());
const contactConfig = computed(() => getContactConfig());
const commonConfig = computed(() => getCommonConfig());
const ruleFormRef = ref<any>();
const fromData = reactive({
  appkey: "e057f20f883e",
  language: "",
  username: "",
  email: "",
  companyname: "",
  telephone: "",
  content: "",
});
// 监听语言变化
watch(
  () => currentLanguage.value,
  () => {
    //请求成功 - 清空数据
    fromData.username = "";
    fromData.email = "";
    fromData.companyname = "";
    fromData.telephone = "";
    fromData.content = "";
    ruleFormRef.value.resetFields();
  }
);

const validateUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.name.placeholder));
  }
  {
    callback();
  }
};
const validateemail = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.email.placeholder));
  }
  {
    callback();
  }
};
const validateCompanyname = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.company.placeholder));
  }
  {
    callback();
  }
};
const validateTelephone = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.phone.placeholder));
  }
  {
    callback();
  }
};
const validateContent = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.message.placeholder));
  }
  {
    callback();
  }
};
const rules = ref({
  username: [
    {
      required: true,
      validator: validateUsername,
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      validator: validateemail,
      trigger: "blur",
    },
  ],
  companyname: [
    {
      required: true,
      validator: validateCompanyname,
      trigger: "blur",
    },
  ],
  telephone: [
    {
      required: true,
      validator: validateTelephone,
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      validator: validateContent,
      trigger: "blur",
    },
  ],
});

const submitForm = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 处理表单提交逻辑
      postContactus({
        ...fromData,
        language: commonConfig.value.language,
      }).then((res: any) => {
        console.log(res);
        if (res.status === 100) {
          //请求成功 - 清空数据
          fromData.username = "";
          fromData.email = "";
          fromData.companyname = "";
          fromData.telephone = "";
          fromData.content = "";
          ruleFormRef.value.resetFields();
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped lang="less"></style>
